<template>
  <div class="add-role">
    <main class="add-main">
      <div class="step-container">
        <el-steps direction="vertical" :active="activeStep">
          <el-step title="角色信息" />
          <el-step title="权限信息" />
          <el-step title="检查并完成" />
        </el-steps>
      </div>
      <div v-show="activeStep === 1" class="form-container">
        <div class="title">角色信息</div>
        <div class="form">
          角色信息内容
          <div class="form">
            <el-form class="form-box" :model="roleForm" :rules="roleRules">
              <el-form-item label="角色名称" prop="roleName">
                <el-input v-model="roleForm.roleName" />
              </el-form-item>
              <el-form-item label="角色描述">
                <el-input v-model="roleForm.remark" />
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
      <div v-show="activeStep === 2" class="form-container">
        <div class="title">权限配置</div>
        <div class="form">权限配置内容</div>
      </div>
      <div v-show="activeStep === 3" class="form-container">
        <div class="title">检查并完成</div>
        <div class="form">检查并完成内容</div>
      </div>
    </main>
    <footer class="add-footer">
      <div class="btn-container">
        <el-button v-if="activeStep > 1" @click="decreseStep">上一步</el-button>
        <el-button v-if="activeStep < 3" type="primary" @click="increseStep"
          >下一步</el-button
        >
        <el-button v-if="activeStep === 3" type="primary">确认添加</el-button>
      </div>
    </footer>
  </div>
</template>
  <script>
export default {
  data() {
    return {
      activeStep: 1,
      roleForm: {
        roleName: "",
        remark: "",
      },
      roleRules: {
        roleName: [
          { required: true, message: "请输入角色名称", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    decreseStep() {
      if (this.activeStep === 1) return;
      this.activeStep--;
    },
    increseStep() {
      if (this.activeStep === 3) return;
      if (this.activeStep === 1) {
        // 当前是角色信息状态，进行表单校验
        this.$refs.roleForm.validate((valid) => {
          if (valid) {
            // 校验通过才能进入下一个状态
            this.activeStep++;
          }
        });
      }
    },
  },
};
</script>